<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>神游网首页</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.min1.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

    <link rel="stylesheet" href="sycss/shenyou.css">
    <link rel="stylesheet" href="sycss/foot.css">
    <!--foundation-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
    <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

    <!--bootstrap-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!--<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->

    <script>
$(function () {
    var userId =  $.cookie('userId').toString();
    sessionStorage.setItem("USERID", userId);

})

    </script>
</head>
<body >
<!--登录注册-->
<nav class="top-bar">
    <section class="top-bar-section">
        <ul class="left">
            <li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> 登 录 </a></li>
            <li><a href="register.html"><span class="glyphicon glyphicon-user"></span> 注 册 </a></li>
        </ul>
        <ul class="right">
            <li><a href="community_my.html"> <span class="glyphicon glyphicon-home"></span> 我的社区 </a></li>
            <li><a href="#"> <span class="glyphicon glyphicon-bell"></span> 帮助中心 </a></li>
        </ul>
    </section>
</nav>

<!--搜索-->
<div id="myhead">
    <div id="leftlogo">
        <img src="syimages/logo.png">
    </div>
    <div id="rightlogo">
        <div class="textstyle" id="mycity">
            <div class="dropdown">
                <button class="dropbtn">{{cityName}} <b class="caret"></b></button>
                <div class="dropdown-content" >
                    <a href="#" v-for="(list,index) in hotCityList " @click="selectCity(index)">
                        {{list.HotCityName}}
                    </a>
                </div>
            </div>
        </div>
        <!--搜索-->
        <div id="search">
            <div class="form">
                <input type="text" class="text" id="scity">
                <button class="button" id="sbutton" @click="changeCity">搜 索</button>
            </div>
        </div>

        <div class="infostyle">400 820 8820</div>
    </div>
</div>

<!--导航栏-->
<div id="mynav">
    <nav class="navbar navbar-inverse " role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"> </a>
                <ul class="nav navbar-nav ">
                    <li ><a class="navbar-brand" href="#"> </a></li>
                    <li ><a class="navbar-brand" href="sy-index.html">首 页</a></li>
                    <li ><a class="navbar-brand" href="#"> </a></li>
                    <li ><a class="navbar-brand" href="YouJi-Z.html">游 记</a></li>
                    <li ><a class="navbar-brand" href="#"> </a></li>
                    <li ><a class="navbar-brand" href="photo.html">图 片</a></li>
                    <li ><a class="navbar-brand" href="#"> </a></li>
                    <li ><a class="navbar-brand" href="video.html">视 频</a></li>
                    <li ><a class="navbar-brand" href="#"> </a></li>
                    <li ><a class="navbar-brand" href="community_my.html">我的社区</a></li>
                    <li ><a class="navbar-brand" href="#"> </a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

<!--轮播-->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="syimages/slide1.jpg" alt="First slide">
        </div>
        <div class="item">
            <img src="syimages/slide1.jpg" alt="Second slide">
        </div>
        <div class="item">
            <img src="syimages/slide1.jpg" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<div id="mybody">
    <hr>
    <img src="syimages/body1.jpg" width="580">
    <img src="syimages/body2.png" width="580">
    <!--游记-->
    <div id="div3">
        <div class="divtop">
            <div class="titleleft">
                <h2><i class="fa fa-paper-plane" style="font-size:32px"></i> <small>活动游记</small></h2>
            </div>
            <div class="titleright">
                <ul class="breadcrumb">
                    <li><a href="YouJi-Z.html">/更多 ></a></li>
                </ul>
            </div>
        </div>
        <div class="divbottom2" id="Articles">
            <ul class="ulbody">
                <li class="box2" v-for="(list,index) in ArticleList ">
                    <a><img :src=list.ArticleImg width="188" height="124"></a>
                    <div class="content2">
                        <h3 class="title2">
                            <a href="#" target="_blank">{{list.ArticleContent}} </a>
                                <!--向左是伊甸园的阶梯，往右是时光的任意门——外高加索很神奇,但你得开着好车去-->
                        </h3>
                        <div class="info2">{{list.ArticleTime}} by
                            <a href="#" target="_blank">{{list.UserName}}</a>
                        </div>
                    </div>
                </li>

                <!--发表游记按钮-->
                <li><a href="travel_articles.html"><img src="syimages/writebutton.png" class="imgbutton"></a></li>
            </ul>

        </div>
    </div>
    <hr>
    <!--图片-->
    <div id="div4">
        <div class="divtop">
            <div class="titleleft">
                <h2><i class="fa fa-camera-retro" style="font-size:32px"></i> <small>精彩摄影作品</small></h2>
            </div>
            <div class="titleright">
                <ul class="breadcrumb">
                    <li><a href="photo.html">/更多 ></a></li>
                </ul>
            </div>
        </div>
<!--        <div class="divbottom4">-->
<!--            <div class="img1">-->
<!--                <img src="syimages/img1.jpg">-->
<!--            </div>-->
<!--            <div class="img2">-->
<!--                <img src="syimages/img1.jpg">-->
<!--            </div>-->
<!--            <div class="img3">-->
<!--                <img src="syimages/img1.jpg">-->
<!--            </div>-->
<!--            <div class="img4">-->
<!--                <img src="syimages/img1.jpg">-->
<!--            </div>-->
<!--            <div class="img5">-->
<!--                <img src="syimages/img1.jpg">-->
<!--            </div>-->
<!--            <div class="img6" href="up_photos.html">-->
<!--                <img src="syimages/uploadimg.png" >-->
<!--            </div>-->
<!--            <div class="img7">-->
<!--                <img src="syimages/img1.jpg">-->
<!--            </div>-->
<!--        </div>-->
        <div class="divbottom4">
            <div class="img1">
                <img src="syimages/img1.jpg">
            </div>
            <div class="img2">
                <img src="httpimg/青台山1.jpg">
            </div>
            <div class="img3">
                <img src="httpimg/天空之城1.jpg">
            </div>
            <div class="img4">
                <img src="httpimg/青台山3.jpg">
            </div>
            <div class="img5">
                <img src="httpimg/八卦.jpg">
            </div>
            <div class="img6" >
                <a href="up_photos.html"><img src="syimages/uploadimg.png" ></a>
            </div>
            <div class="img7">
                <img src="httpimg/逐云.jpg">
            </div>
        </div>



    </div>
    <hr>
    <!--视频-->
    <div id="div5">
        <div class="divtop">
            <div class="titleleft">
                <h2><i class="fa fa-youtube-play" style="font-size:36px"></i> <small>神仙视频剪辑</small></h2>
            </div>
            <div class="titleright">
                <ul class="breadcrumb">
                    <li ><a href="video.html">/更多 ></a></li>
                </ul>
            </div>
        </div>
        <div class="divbottom5">
            <div class="video1">
                <div class="content5">
                    <a href="#">
                        <img src="syimages/vedio1.png">
                        <img src="syimages/stop.png" class="icon_play">
                    </a>
                </div>
                <div class="title5">
                    <a>
                        穿越生命禁区-塔克拉玛干沙漠
                    </a>
                </div>
            </div>
            <div class="video1">
                <div class="content5">
                    <a href="#">
                        <img src="syimages/vedio1.png">
                        <img src="syimages/stop.png" class="icon_play">
                    </a>
                </div>
                <div class="title5">
                    <a>
                        穿越生命禁区-塔克拉玛干沙漠
                    </a>
                </div>
            </div>
            <div class="video1">
                <div class="content5">
                    <a href="#">
                        <img src="syimages/vedio1.png">
                        <img src="syimages/stop.png" class="icon_play">
                    </a>
                </div>
                <div class="title5">
                    <a>
                        穿越生命禁区-塔克拉玛干沙漠
                    </a>
                </div>
            </div>
            <div class="video1">
                <div class="content5">
                    <a href="#">
                        <img src="syimages/vedio1.png">
                        <img src="syimages/stop.png" class="icon_play">
                    </a>
                </div>
                <div class="title5">
                    <a>
                        穿越生命禁区-塔克拉玛干沙漠
                    </a>
                </div>
            </div>

        </div>

    </div>
    <hr>
</div>

<!--四个链接-->
<div id="myfoo">
    <div class="foottext">    <img src="syimages/interview.png" width="51"><h3>神仙之旅</h3> </div>
    <div class="foottext">    <img src="syimages/story.png" width="51"><h3>神游攻略</h3></div>
    <div class="foottext">    <img src="syimages/video.png" width="51"><h3>神游好图</h3></div>
    <div class="foottext">    <img src="syimages/video.png" width="51"><h3>神游视频</h3></div>
</div>
<hr>
<!--页脚-->
<div>
    <div class="b_floor">
        <div class="l_wrapper">
            <div class="m_unit_b2">
                <div class="footerInfo">
                    <ul class="weima">
                        <li>
                            <img src="https://img3.youxiake.com/static/images/weima1.png" width="77" height="77"><p>神游网公众号</p>
                        </li>
                        <li>
                            <img src="https://img3.youxiake.com/static/images/weima2.png" width="78" height="79"> <p>APP下单更优惠</p>
                        </li>
                    </ul>
                    <p>
                        <a data-trace="页面底部|页面底部_点击|页面底部_关于游侠客" rel="nofollow" href="javascript:void (0)" target="_blank">关于神游网</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_游侠客的故事" rel="nofollow" href="javascript:void (0)" target="_blank">制作组的故事</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_联系游侠客" rel="nofollow" href="javascript:void (0)" target="_blank">联系制作组</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_游侠客招聘" rel="nofollow" href="javascript:void (0)" target="_blank">制作组招聘</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_意见反馈" rel="nofollow" href="javascript:void (0)" target="_blank">意见反馈</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_使用协议" rel="nofollow" href="javascript:void (0)" target="_blank">使用协议</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_隐私政策" rel="nofollow" href="javascript:void (0)" target="_blank">隐私政策</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_交换链接" rel="nofollow" href="javascript:void (0)" target="_blank">交换链接</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_帮助中心" rel="nofollow" href="javascript:void (0)" target="_blank">帮助中心</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_网站地图" rel="nofollow" href="javascript:void (0)" target="_blank">网站地图</a>
                    </p>
                    <p>
                        <span>浙ICP备 09011712 号-1</span>
                        <span>浙公网安备 33010602002105号</span>
                        <span><a href="javascript:void (0)" rel="nofollow" target="_blank">营业执照</a></span>
                        <span>浙江神游网国际旅行社有限公司</span>
                        <span>杭州途游电子商务有限公司</span>
                        <span>许可证编号：L-ZJ-CJ00161</span>
                    </p>
                    <p> 2019 shenyouwang.com 版权所有法律顾问：浙江四海方圆律师事务所 傅林放 杭州市旅游投诉电话：0571-96123 投诉及紧急事件联系电话：400-670-6300转5</p>
                    <p>旅游预订电话(免长途费)：400-670-6300，公司总部地址：浙江省杭州市西湖区教工路198号浙商大创业园D幢3楼，投诉建议邮箱：jianyi@youxiake.com</p>
                </div>

                <div class="friendLines">
                    <b>友情链接:</b>
                    <div class="boxLeft">
                        <a href="http://www.dazijia.com/" target="_blank">自驾游</a>
                        <a href="http://www.blmcy.com/" target="_blank">餐饮加盟</a>
                        <a href="https://www.shaoshanlvyou.com/" target="_blank">韶山旅游</a>
                        <a href="http://www.share-africa.com/" target="_blank">非洲旅游</a>
                        <a href="https://www.zjjguide.com" target="_blank">张家界旅游导航网</a>
                        <a href="https://www.h-heguo.com" target="_blank">沙发</a>
                        <a href="https://www.hy588.com" target="_blank">上海旅游网</a>
                        <a href="http://www.cdyou.net/" target="_blank">长岛渔家乐</a>
                        <a href="http://bbs.youxiake.com/mdd/1708.html" target="_blank">越南旅游</a>
                        <a href="https://www.32.cn/" target="_blank">商标注册</a>
                        <a href="http://www.pandamart.cn" target="_blank">上海装修公司</a>
                        <a href="https://www.leica-camera.cn/" target="_blank">徕卡相机</a>
                        <a href="http://cn.changiairport.com" target="_blank">新加坡机场</a>
                        <a href="https://www.yyytang.com" target="_blank">野生菌</a>
                        <a href="http://www.360tea.cn" target="_blank">奇茶商城</a>
                        <a href="https://bbs.youxiake.com/mdd/2000.html" target="_blank">恩施旅游</a>
                        <a href="https://www.ch.com/" target="_blank">飞机票</a>
                        <a href="http://www.chinafranchiseexpo.com/" target="_blank">连锁加盟展</a>
                        <a href="http://jiudian.jiameng.com" target="_blank">酒店加盟</a>
                        <a href="https://www.8684.cn/" target="_blank">公交车线路查询</a>
                        <a href="http://www.cits.cn" target="_blank">国旅在线</a>
                        <a href="https://cn.londonermacao.com/" target="_blank">澳门伦敦人酒店官网</a>
                        <a href="http://www.aoyou.com/" target="_blank">中青旅遨游网</a>
                        <a href="http://www.joytrav.com/" target="_blank">美国旅游</a>
                        <a href="http://news.youxiake.com/" target="_blank">旅游资讯</a>
                        <a href="http://www.youxiake.com/db/" target="_blank">东北旅游</a>
                        <a href="http://beijing.cncn.com" target="_blank">北京旅游攻略</a>
                        <a href="http://www.youxiake.com/bs/" target="_blank">坝上旅游</a>
                        <a href="http://www.ytszg.com/" target="_blank">中国青年旅行社</a>
                        <a href="http://www.youxiake.com/bs/" target="_blank">坝上草原</a>
                        <a href="http://www.161580.com" target="_blank">机票预订</a>
                        <a href="http://www.youxiake.com/db/" target="_blank">雪乡摄影</a>
                        <a href="http://dujia.lvmama.com/" target="_blank">度假旅游线路</a>
                        <a href="http://hangzhou.fangtoo.com/" target="_blank">房途网</a>
                        <a href="http://tour.19lou.com/" target="_blank">19楼旅游</a>
                        <a href="http://www.canyin375.com/" target="_blank">餐饮加盟</a>
                        <a href="http://www.fixdown.com" target="_blank">全方位下载</a>
                        <a href="http://bbs.youxiake.com/" target="_blank">游侠客社区</a>
                    </div>
                    <div class="footerImages clearfix foot-ext">
                        <a href="javascript:;" rel="nofollow" title="不良信息举报中心" class="footer-ext-s2"></a>
                        <a href="javascript:;" rel="nofollow" title="瑞信安全认证" class="footer-ext-s3"></a>
                        <a href="javascript:;" rel="nofollow"  title="12321垃圾信息举报中心" class="footer-ext-s4"></a>
                        <a href="javascript:;" rel="nofollow">
                            <img width="116" height="47" src="https://img3.youxiake.com/static/images/alipay201305.png" alt="支付宝">
                        </a>
                        <a href="javascript:;" rel="nofollow"  title="网络110报警服务" class="footer-ext-s5"></a>
                        <a href="javascript:;" rel="nofollow"  title="网上标识信息" class="footer-ext-s6"></a>
                        <a href="javascript:;" rel="nofollow"  title="全球中文论坛100强" class="footer-ext-s7"></a>
                        <a target="cyxyv" href="https://v.yunaq.com/certificate?domain=bbs.youxiake.com&amp;from=label&amp;code=90020">
                            <img src="https://aqyzmedia.yunaq.com/labels/label_sm_90020.png">
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!--侧边栏-->
<div class="sideMenu">
    <div class="sideMenuTop">
        <div class="sideMenuShop">
        </div>
        <!--<a class="sideMenuItem sideMenuItem-active"></a>-->
        <a class="sideMenuItem sideMenuItem-photo" style="height: 70px" href="photo.html"></a>
        <a class="sideMenuItem sideMenuItem-write" style="height: 70px" href="travel_articles.html"></a>
        <a class="sideMenuItem sideMenuItem-imageupload" style="height: 70px" href="up_photos.html"></a>
        <a class="sideMenuItem sideMenuItem-top"></a>
    </div>

</div>

</body>

<!--获取定位城市-->
<script>
    $.getScript("http://api.map.baidu.com/location/ip?ak=6DGNHZfh7hGjqupjLMl8VcYCpf5ThztB&callback=showLocation");
    function showLocation(data) {
//        console.log(data.content.address_detail.city);
        var a =new Vue({
            el:"#rightlogo",
            data:{
                cityName:data.content.address_detail.city,
                hotCityList:[]
            },
            methods: {
                changeCity :function () {
                    if ($("#scity").val().indexOf("市")!=-1){
                        this.cityName=$("#scity").val();
                        $.ajax({
                            url:"/setHot",
                            data:{
                                cityName:this.cityName
                            },
                            type:"post",
                            dataType: "json"
                        });

                    }
                },
                selectCity :function(index){
                    this.cityName=this.hotCityList[index].HotCityName;
                    $.ajax({
                        url:"/setHot",
                        data:{
                            cityName:this.cityName
                        },
                        type:"post",
                        dataType: "json"
                    });
                    vm.ArticleList=[];
                    ajax();
                }
            }
        });
        //获取热门城市
        $.ajax({
            url:"/getHot",
            type:"post",
            dataType:"json",
            success:function (data) {
                for (var i =0;i<data.length && i<6;i++){
                    a.hotCityList.push({
                        HotCityName:data[i].element,
                        Hot:data[i].score
                    });
                }
            }
        });
        //获取文章
        var vm = new Vue({
            el: "#Articles",
            data: {
                ArticleList:[]
            },
            methods: {
            }
        });
        console.log(a.cityName);
        //显示定位城市的游记
        ajax();
        function ajax() {
            $.ajax({
                url: "/getNowA",
                type: "post",
                data:{
                    cityName :a.cityName
                },
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var UserName="";
                        UserName=$.ajax({
                            url:"/getUserName",
                            type:"post",
                            data:{
                                userid:data[i].userId
                            },
                            async:false,
                            dataType:"text",
                            success:function (result) {
                            }
                        }).responseText;
                        console.log(UserName);
                        vm.ArticleList.push({
//                        articleId:data[i].articleId,
//                        UserId:data[i].userId,
//                        idBest:data[i].idBest,
//                        hot:data[i].hot,
                            ArticleTime:data[i].articleTime.substring(0,10),
//                        article_address:data[i].article_address,
//                        article_local:data[i].article_local,
                            ArticleImg:data[i].articleImg,
//                        article_face:data[i].article_face,
                            ArticleContent:data[i].articleContent,
                            UserName:UserName
                        });
                    }
                }
            });
        }

        //搜索城市显示内容
        $("#sbutton").click(function () {
            console.log($("#scity").val());
            var searchCity = $("#scity").val();
            $.ajax({
                url: "/getNowA",
                type: "post",
                data:{
                    cityName :searchCity
                },
                dataType: "json",
                success: function (data) {
                    vm.ArticleList=[];
                    for (var i = 0; i < data.length; i++) {
                        vm.ArticleList.push({
                            ArticleContent:data[i].articleContent,
//                        articleId:data[i].articleId,
//                        userId:data[i].userId,
//                        idBest:data[i].idBest,
//                        hot:data[i].hot,
                            ArticleTime:data[i].articleTime.substring(0,10),
//                        article_address:data[i].article_address,
//                        article_local:data[i].article_local,
                            ArticleImg:data[i].articleImg,
//                        article_face:data[i].article_face,
//                        articleContent:data[i].articleContent
                        });
                    }
                }
            });
        });

    }






</script>
</html>